<template>
	<view class="container">
		<view class="header">
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<view class="back-arrow"></view>
				</view>
				<view class="nav-title">订单支付</view>
				<view class="nav-right"></view>
			</view>
		</view>

		<view class="content">
			<view class="success-card">
				<image class="success-image" src="/static/image/carmaintenance/对勾@3x.png" mode="aspectFit"></image>
				<text class="success-text">支付成功</text>
				<text class="success-amount">{{ amount }}</text>
				<text class="order-no">预约编号： {{ orderNo }}</text>
				<view class="btn primary" @click="goHome">返回首页</view>
				<view class="btn ghost" @click="goDetail">订单详情</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const amount = ref('0.00');
const orderNo = ref('');

onLoad((query) => {
	amount.value = query.amount || '0.00';
	orderNo.value = query.orderNo || '';
});

const goHome = () => {
	uni.switchTab({ url: '/pages/index/index' });
};

const goDetail = () => {
	uni.navigateTo({ url: `/pages/index/carMaintenance/ConOrder/OrderDetail?amount=${amount.value}&orderNo=${orderNo.value}` });
};

const goBack = () => {
	uni.navigateBack();
};
</script>

<style scoped>
.container{width:100%;min-height:100vh;background:#f5f5f5;display:flex;flex-direction:column;}
.header{background:linear-gradient(180deg,#2477F4 0%,#166BEC 100%);padding-top:30rpx;padding-bottom:30rpx;flex-shrink:0;}
.nav-bar{display:flex;align-items:center;justify-content:space-between;padding:20rpx 30rpx;padding-top:calc(20rpx + env(safe-area-inset-top));}
.nav-left{width:80rpx;display:flex;align-items:center;}
.back-arrow{width:24rpx;height:24rpx;border-left:4rpx solid #fff;border-bottom:4rpx solid #fff;transform:rotate(45deg);margin-left:10rpx;}
.nav-title{flex:1;text-align:center;font-size:36rpx;font-weight:500;color:#fff;}
.content{flex:1;height:0;padding:30rpx;}
.success-card{background:#fff;border-radius:20rpx;padding:60rpx 30rpx;display:flex;flex-direction:column;align-items:center;gap:20rpx;}
.success-image{width:120rpx;height:120rpx;}
.success-text{font-size:32rpx;color:#333;}
.success-amount{font-size:48rpx;color:#000;font-weight:700;}
.order-no{font-size:24rpx;color:#999;margin:10rpx 0 30rpx;}
.btn{width:80%;height:88rpx;border-radius:44rpx;display:flex;align-items:center;justify-content:center;margin-top:20rpx;font-size:32rpx;}
.primary{background:#1E88E5;color:#fff;}
.ghost{background:#e6e6e6;color:#666;}
</style>

